<!doctype html>
<html>
<head>
<title>Gestión de FACTURAS</title>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" type="text/css"
	rel="stylesheet">
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/facturas.js"></script>
<script src="js/handlebars.js"></script>
<script>
	var urlrest = 'http://localhost:8080/FacturacionSamuelMagd/rest/facturas/';
	var urlrestclientes = 'http://localhost:8080/FacturacionSamuelMagd/rest/clientes/';
	var seleccionado;
</script>
</head>
<body>
	<div class="container">
		<br />
		<ul class="nav nav-tabs">
			<li class="active">
	    		<a href="factura.html">Facturas</a>
	  		</li>
	  		<li><a href="cliente.html">Clientes</a></li>
		</ul>
		<div class="row">
			<div class="span12">
				<form class="form-inline">
					<label>NIF Cliente</label> <input type="text" class="input-small" id="nifcliente">
					<label>Metros desde</label> <input type="text" class="input-small" id="metrosdesde">
					<label>Metros hasta</label> <input type="text" class="input-small" id="metroshasta">
					<button type="submit" class="btn" id="filtrar">Filtrar</button>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="span12">
				<table class="table">
					<thead>
						<th>Código</th>
						<th>Metros</th>
						<th>Tarifa</th>
						<th>Fecha</th>
						<th>Periodo</th>
						<th>Cliente</th>
						<th></th>
						<th><a href="#modal" data-toggle="modal"> <i
								class="icon-plus-sign"></i>
						</a></th>
					</thead>
					<tbody id="body"></tbody>
				</table>
			</div>
		</div>
		<div class="modal hide fade" id="modal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Añadir factura</h3>
			</div>
			<div class="modal-body">
				<form>
					<label>Código</label> <input type="text" id="formcodigo"> <label>Metros</label>
					<input type="text" id="formmetros"> <label>Tarifa</label> <input
						type="text" id="formtarifa"> <label>Fecha</label> <input
						type="text" id="formfecha"> <label>Periodo</label> <input
						type="text" id="formperiodo"> <label>Cliente</label> <select
						id="selector_cliente"></select>
				</form>
			</div>
			<div class="modal-footer">
				<a id="anyadir" class="btn btn-primary">Guardar</a>
			</div>
		</div>
		<div class="modal hide fade" id="edit">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Editar factura</h3>
			</div>
			<div class="modal-body">
				<form>
					<label>Código</label> <input type="text" id="eformcodigo" disabled>
					<label>Metros</label> <input type="text" id="eformmetros">
					<label>Tarifa</label> <input type="text" id="eformtarifa">
					<label>Fecha</label> <input type="text" id="eformfecha">
					<label>Periodo</label><input type="text" id="eformperiodo">
					<label>Cliente</label> <select id="selector_cliente_edit"></select>
				</form>
			</div>
			<div class="modal-footer">
				<a id="editar" class="btn btn-primary">Editar</a>
			</div>
		</div>
	</div>
</body>
<script id="template" type="text/x-handlebars-template">
                <tr class="id_{{ codigo }}">
                        <td class="fieldcodigo{{ codigo }}">{{ codigo }}</td>
                        <td class="fieldmetros{{ codigo }}">{{ metros }}</td>
                        <td class="fieldtarifa{{ codigo }}">{{ tarifa }}</td>
                        <td class="fieldfecha{{ codigo }}">{{ fecha }}</td>
                        <td class="fieldperiodo{{ codigo }}">{{ periodo }}</td>
						<td class="fieldnif{{ codigo }}">{{ nif }}</td>
                        <td>
                                <a href="#" class="codigo_{{ codigo }} btnEditar">
                                        <i class="icon-pencil"></i>
                                </a>
                        </td>
                        <td>
                                <a href="#" class="borrar_{{ codigo }} btnBorrar">
                                        <i class="icon-trash"></i>
                                </a>
                        </td>
                </tr>
        </script>
<script id="tpl_clientes" type="text/x-handlebars-template">
                <option value="{{ nif }}">{{ nombre }}</option>
        </script>
</html>